<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular autoplay interval="3000" duration="1000">
			<block v-for="(item,index) in bannerlist" :key="index">
				<swiper-item>
					<image class="swiper-item" :src="item.img"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- 分类 -->
		<scroll-view class="classify" scroll-x="true">
			<block v-for="(item,index) in classify" :key="index">
				<view class="classify_box" :class="index==classifyIndex?'classify_active':''" @click="selectClassify(index)">
					{{item}}
					<view class="classify_active_border" v-if="index==classifyIndex"></view>
				</view>
			</block>
		</scroll-view>
		
		<!-- 图片 -->
		<view class="img" v-if="classifyIndex==0">
			<block v-for="(item,index) in list" :key="index">
				<view class="imgbox">
					<image :src="item.imgurl" class="imgbox_img" mode="aspectFill" @click="previewImage(index)"></image>
					<view class="imgbox_status" :style="{'background':item.checkflag==1?'#03AEA5':'#B71F33'}">
					<block v-if="item.checkflag==1">
						已审核
					</block>
					<block v-else>
						{{item.checkflag==0?'审核中':'已拒绝'}}
					</block>
				</view>
					<view class="imgbox_f" v-if="item.checkflag!=1" @click="deleteData(index,item.photoid)">
						<image src="/static/materialDelete.png" class="imgbox_f_img"></image>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 视频 -->
		<view class="video" v-if="classifyIndex==1">
			<block v-for="(item,index) in list" :key="index">
				<view class="video_box">
					<view class="video_box_status" :style="{'background':item.checkflag==1?'#03AEA5':'#B71F33'}">
					<block v-if="item.checkflag==1">
						已审核
					</block>
					<block v-else>
						{{item.checkflag==0?'审核中':'已拒绝'}}
					</block>
					</view>
					<video :id="`video${item.videourl}`" @play='videoPlay(item.videourl)' @fullscreenchange="fullscreenchange" :src="item.videourl" object-fit="cover" class="video_box_video"></video>
					<view class="video_boxes">
						<view class="video_boxes_text">{{item.title}}</view>
						<view class="video_boxes_delete" v-if="item.checkflag!=1" @click="deleteData(index,item.photoid)">删除</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 文案 -->
		<view class="text" v-if="classifyIndex==2">
			<block v-for="(item,index) in list" :key="index">
				<view class="textbox">
					<view class="textbox_status" :style="{'background':item.checkflag==1?'#03AEA5':'#B71F33'}">
					<block v-if="item.checkflag==1">
						已审核
					</block>
					<block v-else>
						{{item.checkflag==0?'审核中':'已拒绝'}}
					</block>
					<!-- {{item.checkflag==1?'已审核':'审核中'}} -->
					</view>
					<text class="textbox_text">{{item.word}}</text>
					<view class="textbox_delete" v-if="item.checkflag!=1" @click="deleteData(index,item.photoid)">删除</view>
				</view>
			</block>
		</view>
		
		<!-- 占位图 -->
		<!-- <image src="/static/nothing.jpg" mode="widthFix" style="width: 750rpx;" v-if="!list.length"></image> -->
		<view class="footer" v-if="!list.length">暂无内容</view>
		
	</view>
</template>

<script>
	let page = 1
	let lastPage = false
	export default {
		data() {
			return {
				bannerlist: [],
				classify: ['图片','视频','文案'],
				classifyIndex: 0,
				list: [],
				imglist: [],
				zoneid: '',
				ctypeid: '',
				show: true,
				playId: 0,
				videoContext: '',
			};
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			
			// that.list = []
			
			setTimeout(function () {
				that.list = []
				page = 1
				lastPage = false
				that.request()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 下一页
		onReachBottom(){
			let that = this
			
			if(!lastPage){
				that.request()
			}
		},
		
		
		onLoad() {
			let that = this
			
			uni.request({
				url: getApp().globalData.url + '/fp/bannerlist',
				method: 'POST',
				success(res) {
					that.bannerlist = res.data.data
				}
			})
		},
		
		onShow() {
			let that = this
			
			if(that.show){
				that.request()
			}
		},
		
		methods: {
			// 点击切换
			selectClassify(i){
				let that = this
				
				if(that.classifyIndex==i){
					return false
				}
				that.classifyIndex = i
				page = 1
				lastPage = false
				that.list = []
				that.playId = ''
				that.request()
			},
			
			// 预览图片
			previewImage(index){
				let that = this
				
				that.show = false
				let imglist = []
				that.list.map((item)=>{
					imglist.push(item.imgurl)
				})
				uni.previewImage({
					urls: imglist,
					current: index
				});
			},
			
			// 删除
			deleteData(i,id){
				let that = this
				
				uni.showModal({
					title: '提示',
					content: '您确定要删除此条素材吗？',
					success: function (res) {
						if (res.confirm) {
							uni.request({
								url: getApp().globalData.url + '/fp/myphotodel',
								method: 'POST',
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									token: uni.getStorageSync('token')
								},
								data: {
									photoid: id,
								},
								success(res) {
									if(res.data.code==20000){
										let list = that.list
										list.splice(i,1)
										that.list = list
										uni.showToast({
											title: '素材删除成功',
											icon: 'none'
										})
									}else{
										page = 1
										lastPage = false
										that.list = []
										that.request()
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								}
							})
						}
					}
				})
			},
			
			// // 视频播放
			// videoPlay(id) {
			// 	let that = this
			// 	if (that.playId !== 0 && that.playId != id) {
			// 		let videoContext = uni.createVideoContext(`video${that.playId}`)
			// 		videoContext.pause()
			// 	}
			// 	that.show = false
			// 	that.playId = id
			// },
			
			// 视频播放
			videoPlay(id) {
				let that = this
				
				that.videoContext = uni.createVideoContext(`video${id}`)
				that.videoContext.requestFullScreen()
			 //    if (that.playId !== 0 && that.playId != id) {
			 //        let videoContext = uni.createVideoContext(`video${that.playId}`)
				// 	videoContext.pause()
			 //    }
				// that.playId = id
			},
			
			// 进入/退出全屏
			fullscreenchange(e){
				let that = this
				
				if(!e.detail.fullScreen){
					that.videoContext.pause()
				}
			},
			
			// 请求接口
			request(){
				let that = this
				
				uni.request({
					url: getApp().globalData.url + '/fp/myphotolist',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						token: uni.getStorageSync('token')
					},
					data: {
						pagecurrent: page,
						pagesize: 20,
						ptype: that.classifyIndex
					},
					success(res) {
						if(that.list.length){
							that.list = that.list.concat(res.data.data.list)
						}else{
							that.list = res.data.data.list
						}
						if(res.data.data.lastPage){
							lastPage = true
						}else{
							page++
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	.swiper{
		width: 750rpx;
		height: 527rpx;
		overflow: hidden;
	}
	.swiper-item{
		width: 750rpx;
		height: 527rpx;
	}
	
	// 分类
	.classify{
		width: 750rpx;
		height: 126rpx;
		white-space: nowrap;
		background: #FFFFFF;
		
		&_box{
			// float: left;
			display: inline-block;
			padding: 44rpx 34rpx 0;
			height: 40rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 44rpx;
			color: #000000;
			line-height: 40rpx;
		}
		&_active{
			position: relative;
			font-weight: bold;
			font-size: 44rpx;
			color: #03AEA5;
			
			&_border{
				position: absolute;
				bottom: -18rpx;
				left: 50%;
				transform: translate(-50%);
				width: 42rpx;
				height: 5rpx;
				background: #03AEA5;
			}
		}
	}
	
	// 图片
	.img{
		margin: 20rpx 0;
		overflow: hidden;
		
		.imgbox{
			position: relative;
			float: left;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
			width: 370rpx;
			height: 370rpx;
			
			
			&_img{
				width: 370rpx;
				height: 370rpx;
			}
			&_status{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 120rpx;
				height: 66rpx;
				background: #ECECEC;
				border-radius: 0rpx 0rpx 0rpx 15rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 63rpx;
			}
			&_f{
				position: absolute;
				bottom: 0rpx;
				left: 0rpx;
				width: 100%;
				height: 72rpx;
				background: rgba(0, 0, 0,0.6);
				overflow: hidden;
				
				&_img{
					margin-top: 16rpx;
					margin-left: 165rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.imgbox:nth-child(2n){
			margin-right: 0rpx;
		}
	}
	
	// 视频
	.video{
		margin: 20rpx 30rpx;
		overflow: hidden;
		
		&_box{
			position: relative;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 516rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;
			
			&_status{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 160rpx;
				height: 66rpx;
				background: #ECECEC;
				border-radius: 0rpx 0rpx 0rpx 15rpx;
				text-align: center;;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 66rpx;
				z-index: 3;
			}
			&_video{
				width: 690rpx;
				height: 388rpx;
				overflow: hidden;
			}
			.video_boxes{
				margin: 30rpx;
				height: 68rpx;
				overflow: hidden;
				
				&_text{
					float: left;
					width: 431rpx;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 40rpx;
					color: #000000;
					line-height: 68rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				&_delete{
					float: right;
					margin-right: 30rpx;
					width: 164rpx;
					height: 68rpx;
					background: #009C8F;
					border-radius: 10rpx;
					text-align: center;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 68rpx;
				}
			}
		}
	}
	
	// 文案
	.text{
		margin: 20rpx 0rpx;
		overflow: hidden;
		
		.textbox{
			position: relative;
			padding: 50rpx 40rpx 41rpx 48rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			&_status{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 160rpx;
				height: 66rpx;
				border-radius: 0rpx 0rpx 0rpx 15rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 66rpx;
			}
			&_text{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
			}
			&_delete{
				margin-top: 32rpx;
				margin-left: 500rpx;
				width: 164rpx;
				height: 68rpx;
				background: #009C8F;
				border-radius: 10rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 68rpx;
			}
		}
	}
	
	.footer{
		margin-top: 200rpx;
		text-align: center;
		height: 60rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #cccccc;
		line-height: 60rpx;
	}
</style>
